<script setup lang="ts">
import { reactive, ref } from "vue"
import { ElMessage, type FormInstance, type FormRules } from "element-plus"
import { CreateMenuRequestData, EditMenuRequestData, getMenuDetailApi, getMenuListApi } from "@/api/system"
import { MenusData } from "@/api/system/types/menu"

defineOptions({
  // 命名当前组件
  name: "menuEditPage"
})
const emit = defineEmits(["DialogClose"])

const ids = ref<string>("")
const loading = ref<boolean>(false)
const dialogFormVisible = ref<boolean>(false)
const title = ref<string>("新增")
const formLabelWidth = "140px"
const formRef = ref<FormInstance | null>(null)
const formRules: FormRules = reactive({
  title: [{ required: true, trigger: "blur", message: "请输入" }],
  name: [{ required: true, trigger: "blur", message: "请输入" }],
  http_name: [{ required: true, trigger: "blur", message: "请输入" }]
})
const tableData = ref<MenusData[]>([])
const form = reactive<any>({
  title: "",
  path: "",
  name: "",
  component: "",
  redirect: "",
  hidden: 0,
  icon: "",
  parent_id: 0,
  controller: "",
  http_name: ""
})
const resetForm = () => {
  ids.value = ""
  form.title = ""
  form.path = ""
  form.name = ""
  form.component = ""
  form.redirect = ""
  form.icon = ""
  form.icon = ""
  form.parent_id = 0
  form.controller = ""
  form.http_name = ""
}
const handleClose = async () => {
  formRef.value?.resetFields()
  resetForm()
  dialogFormVisible.value = false
  emit("DialogClose", true)
}
function isNotNullOrUndefined(value: any): value is string {
  return value !== null && value !== undefined
}
const handleUpdate = async (row: any, currentUpdateId: string) => {
  dialogFormVisible.value = true
  if (!isNotNullOrUndefined(row)) {
    title.value = "新增"
    await getTableListData()
  } else {
    title.value = "修改"
    ids.value = currentUpdateId
    await getDetailData()
    await getTableListData()
  }
}
const handleEdit = async () => {
  formRef.value?.validate((valid: boolean, fields) => {
    if (valid) {
      // form.hidden = hidden.value ? 1 : 0
      if (ids.value == "") {
        CreateMenuRequestData(form)
          .then(() => {
            ElMessage.success("新增成功")
          })
          .finally(() => {
            handleClose()
          })
      } else {
        // Reflect.set(form, "id", ids.value)
        EditMenuRequestData(form)
          .then(() => {
            ElMessage.success("修改成功")
          })
          .finally(() => {
            handleClose()
          })
      }
    } else {
      console.error("表单校验不通过", fields)
    }
  })
}
const getDetailData = async () => {
  loading.value = true
  const res = await getMenuDetailApi({
    id: ids.value
  })
  // form.value = res.data
  Object.assign(form, res.data)
  loading.value = false
}
const getTableListData = async () => {
  const { data } = await getMenuListApi({})
  tableData.value = data
}

defineExpose({ handleUpdate })
</script>

<template>
  <div>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="handleClose">
      <el-form :model="form" ref="formRef" :rules="formRules" v-loading="loading">
        <el-form-item prop="http_name" label="模块名" :label-width="formLabelWidth">
          <el-input v-model="form.http_name" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="controller" label="控制器" :label-width="formLabelWidth">
          <el-input v-model="form.controller" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="title" label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="path" label="路由地址" :label-width="formLabelWidth">
          <el-input v-model="form.path" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="name" label="路由名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="component" label="映射组件名称" :label-width="formLabelWidth">
          <el-input v-model="form.component" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="redirect" label="重定向路由" :label-width="formLabelWidth">
          <el-input v-model="form.redirect" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="parent_id" label="上级路由" :label-width="formLabelWidth">
          <el-tree-select v-model="form.parent_id" :data="tableData" check-strictly :render-after-expand="false" />
          <!--          <el-input v-model="form.parent_id" autocomplete="off" />-->
        </el-form-item>
        <el-form-item prop="hidden" label="菜单隐藏路由" :label-width="formLabelWidth">
          <el-radio-group v-model="form.hidden">
            <el-radio :label="0">菜单</el-radio>
            <el-radio :label="1">接口</el-radio>
          </el-radio-group>
          <!-- <el-switch v-model="hidden" class="mb-2" active-text="接口" inactive-text="菜单" /> -->
          <!--          <el-input v-model="form.hidden" autocomplete="off" />-->
        </el-form-item>
        <el-form-item prop="icon" label="svg图标" :label-width="formLabelWidth">
          <el-input v-model="form.icon" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleEdit">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
